<template>
    <div class="main">
        <div class="welcome-page">
            <div class="bg"></div>
            <div class="text">
                <h2>欢迎！</h2>
                <h4>访问预约仪器共享系统</h4>
            </div>
        </div>
    </div>
</template>
<script setup></script>
<style lang="less" scoped>
.main {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    background-color: #f0f2f5;
    .welcome-page {
        flex: 1;
        height: 0;
        overflow-y: auto;
        margin: 15px;
        border-radius: 6px;
        -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
        background: white url('/@/assets/image/welcome-corner.png') no-repeat left top;
        background-size: 40% auto;
        .bg {
            position: absolute;
            left: 100px;
            right: 100px;
            top: 20px;
            bottom: 20px;
            background: url('/@/assets/image/welcome-pic.png') no-repeat right center;
            background-size: auto 80%;
        }

        .text {
            position: absolute;
            left: 120px;
            top: 48%;
            z-index: 10;
            height: 100px;
            margin-top: -50px;
        }

        h2 {
            font-size: 40px;
            font-weight: bold;
            color: black;
        }
        h4 {
            font-size: 24px;
            font-weight: normal;
            color: #777;
            padding: 0;
            margin: 12px 0 0;
        }
    }
}
</style>
